<template>
  <div class="container">

    <h1 class="title">浏览记录</h1>

    <!-- 分页按钮 -->
    <div class="pagination">
      <button :disabled="page.pageNo === 1" @click="prePage">上一页</button>
      <span>第 {{ page.pageNo }} 页，共 {{ totalPage }} 页</span>
      <button :disabled="page.pageNo === totalPage" @click="nextPage">下一页</button>
    </div>

    <!-- 文章列表 -->
    <div class="record-list">
      <div
        v-for="record in records"
        :key="record.id"
        class="record-item">
        <div class="record-info">
          <h3 class="record-title">{{ record.title }}</h3>
        </div>
        <div class="record-time">
          浏览于 {{ formatDate(record.createTime) }}
        </div>
      </div>
    </div>



  </div>
</template>










  


<script setup>
import { ref, onMounted } from 'vue'
import server from '@/api/server'
import { useRouter } from 'vue-router'
import { browseHistory } from '@/api/BlogUser'

const router = useRouter()

const records = ref([{
    id: 1,
    title: `文章标题`,
    createTime: 1749023965000
}])

const page = ref({
  pageNo: 1,
  pageSize: 20
});

const total = ref(0);

const totalPage = ref(0)

const countTotal = ()=>{
  if(total.value <= page.value.pageSize){
    totalPage.value = 1;
  }else{
    let num = total.value%page.value.pageSize
    let num2 = total.value-num
    if(num2==0){
      totalPage.value = 2;
    }else{
      totalPage.value = (num2/page.value.pageSize)+1;
    }
  }
}

const prePage =()=>{
  page.value.pageNo -=1;
  getData()
}

const nextPage =()=>{
  page.value.pageNo +=1;
  // console.log(page.value)
  // console.log(totalPage.value)
  getData()
}

function formatDate(datetime) {
  return new Date(datetime).toLocaleString()
}








onMounted(()=>{
  if(server.token == ''){
    router.push("/notLogin")
    return
  }
  getData()
})

const getData = ()=>{
  // const params = {
  //   pageNo: page.value.pageNo,
  //   pageSize: page.value.pageSize
  // }
  try {
    browseHistory(server.token, page.value).then((res)=>{
      if (res.data.code==0) {
        records.value = res.data.data.list
        total.value = res.data.data.total
        countTotal()
        console.log(res.data.data)
      } else {
        alert("获取失败："+ res.data.msg)
      }
    })
  } catch (error) {
    alert("获取失败："+ error)
  }
}



</script>











  
  <style scoped>
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Helvetica Neue', sans-serif;
  }
  
  .title {
    font-size: 26px;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
  }
  
  .record-list {
    display: flex;margin-top: 30px;
    flex-direction: column;
    gap: 16px;
  }
  
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    transition: box-shadow 0.3s ease;
  }
  
  .record-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  
  .record-info {
    max-width: 75%;
  }
  
  .record-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
  }
  
  .record-summary {
    font-size: 14px;
    color: #555;
  }
  
  .record-time {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 16px;
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
  }
  
  .pagination button {
    background-color: #007bff;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .pagination button:hover:not(:disabled) {
    background-color: #0056b3;
  }
  
  .pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  .pagination span {
    line-height: 32px;
    font-size: 14px;
  }
  </style>
  